<div class="dashboard-wrapper">

    <div class="left-sidebar" style="margin-right: 0px;">

        
        <div class="row-fluid">
            <div class="span12">
                <div class="widget">
                    <div class="widget-header">
                        <div class="title">
                            Báo cáo tồn kho vật tư
                        </div>
                        <span class="tools">

                            <div class="wrapper">
                                <div class="btn-toolbar no-margin">
                                    <div class="btn-group">
                                        <a data-original-title="" class="btn btn-info bottom-margin"  id="prompt">
                                            Print to PDF
                                        </a>
                                    </div>
                                    <div class="btn-group">
                                        <a id='confirm' data-original-title="" class="btn btn-warning2 bottom-margin" href="#" id="error">
                                            Print to CSV
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </span>
                    </div>
                    <div class="widget-body">
                        <div class="example_alt_pagination" id="dt_example">
                            <div role="grid" class="dataTables_wrapper" id="data-table_wrapper">
                                <div id="data-table_length" class="dataTables_length">
                                    <label>Show 
                                        <select name="data-table_length" size="1" aria-controls="data-table">
                                            <option value="10" selected="selected">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option></select> entries</label>
                                </div>
                                <div class="dataTables_filter" id="data-table_filter">
                                    <select rel="1" class="search_init select_filter form-control">
                                        <option class="search_init" value="">Nhóm vật tư</option>
                                        <option value="G%u0110">Công Ty A</option>
                                        <option value="TPD">Công Ty B</option>

                                    </select>

                                </div>

                                
                                <table id="data-table" class="table table-condensed table-striped table-hover table-bordered pull-left dataTable" aria-describedby="data-table_info">

                                    <thead>
                                        <tr role="row">
                                            <th class="hidden-phone not-sort" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 239px;" aria-label="
                                                Tên dự án 
                                                : activate to sort column ascending">
                                                 Tên nhóm
                                            </th>
                                            <th class="not-sort" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 176px;" aria-label="
                                                Mã dự 
                                                : activate to sort column ascending">
                                                Tên vật tư 
                                            </th>
                                            
                                            <th class="hidden-phone not-sort" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 231px;" aria-label="
                                                Ngày bắt đầu 
                                                : activate to sort column ascending">
                                                Số lượng nhập
                                            </th>

                                            <th class="hidden-phone not-sort" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 160px;" aria-label="
                                                Ngày kết thúc  
                                                : activate to sort column ascending">
                                               Số lượng xuất tạm tính 
                                            </th>
                                            <th class="hidden-phone not-sort" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 160px;" aria-label="
                                                Ngày tạo  
                                                : activate to sort column ascending">
                                               Số lượng xuất hợp đồng
                                            </th>
                                            <th class="hidden-phone not-sort" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 160px;" aria-label="
                                                Ngày kết thúc  
                                                : activate to sort column ascending">
                                               Tồn kho tạm tính 
                                            </th>
                                            <th class="hidden-phone not-sort" role="columnheader" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 160px;" aria-label="
                                                Ngày tạo  
                                                : activate to sort column ascending">
                                               Tồn kho hợp đồng
                                            </th>
                                            
                                        </tr>
                                    </thead>

                                    <tbody role="alert" aria-live="polite" aria-relevant="all">
                                        <?php 
                                        $r = array("Cát","Bê tông",'Thép','Kính chịu lực',"Xi Măng","Nhôm","Gỗ");
                                        for($i=1;$i<=20;$i++){
                                            $k = rand(0,6);
                                            ?>
                                        <tr class="odd">
                                            
                                            <td class=" ">
                                                <span class="name">
                                                    <?= $r[$k] ?>  
                                                </span>
                                            </td>
                                            <td class="hidden-phone ">
                                                <?= $r[$k].rand(1000,4000) ?>     
                                            </td>
                                            <td class="hidden-phone ">
                                                <?= $i*12 ?>
                                            </td>

                                            <td class="hidden-phone ">
                                                <?= $i*2 ?>
                                            </td>
                                            <td class="hidden-phone ">
                                                <?= $i*3 ?>
                                            </td>
                                            <td class="hidden-phone ">
                                                <?= $i ?>
                                            </td>
                                            <td class="hidden-phone ">
                                                <?= $i ?>
                                            </td>
                                            

                                        </tr>
                                        <?php } ?>

                                    </tbody></table><div class="dataTables_info" id="data-table_info">Showing 1 to 10 of 13 entries</div><div class="dataTables_paginate paging_full_numbers" id="data-table_paginate"><a class="first paginate_button paginate_button_disabled" tabindex="0" id="data-table_first">First</a><a class="previous paginate_button paginate_button_disabled" tabindex="0" id="data-table_previous">Previous</a><span><a class="paginate_active" tabindex="0">1</a><a class="paginate_button" tabindex="0">2</a></span><a class="next paginate_button" tabindex="0" id="data-table_next">Next</a><a class="last paginate_button" tabindex="0" id="data-table_last">Last</a></div></div>
                            <div class="clearfix">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


    </div>


</div>  
<script type="text/javascript">
    //ScrollUp


    //Google Visualiations
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);
    google.setOnLoadCallback(drawChart2);
    google.setOnLoadCallback(drawChart3);
    google.setOnLoadCallback(drawChart4);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Time', ' Giá trị nhập', 'Giá trị xuất'],
            ['Apr', 19709, 16761],
            ['May', 21367, 18631],
            ['June', 16792, 9971],
            ['July', 11267, 7491],
            ['Aug', 9539, 5792],
            ['Sep', 8670, 9367],
            ['Oct', 24761, 16809]
        ]);

        var options = {
            width: 'auto',
            height: '160',
            backgroundColor: 'transparent',
            colors: ['#ed6d49', '#0daed3'],
            tooltip: {
                textStyle: {
                    color: '#666666',
                    fontSize: 11
                },
                showColorCode: true
            },
            legend: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            chartArea: {
                left: 100,
                top: 10
            },
            focusTarget: 'category',
            hAxis: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            vAxis: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            pointSize: 6,
            chartArea: {
                left: 60,
                top: 10,
                height: '80%'
            },
            lineWidth: 1,
        };

        var chart = new google.visualization.LineChart(document.getElementById('area_chart'));
        chart.draw(data, options);
    }


    //Tooltip
    $('a').tooltip('hide');
    $('i').tooltip('hide');


    //Tiny Scrollbar
    $('#scrollbar').tinyscrollbar();
    $('#scrollbar-one').tinyscrollbar();
    $('#scrollbar-two').tinyscrollbar();
    $('#scrollbar-three').tinyscrollbar();



    //Tabs
    $('#myTab a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    })

    // SparkLine Graphs-Charts
    $(function() {
        $('#unique-visitors').sparkline('html', {
            type: 'bar',
            barColor: '#ed6d49',
            barWidth: 6,
            height: 30,
        });
        $('#monthly-sales').sparkline('html', {
            type: 'bar',
            barColor: '#74b749',
            barWidth: 6,
            height: 30,
        });
        $('#current-balance').sparkline('html', {
            type: 'bar',
            barColor: '#ffb400',
            barWidth: 6,
            height: 30,
        });
        $('#registrations').sparkline('html', {
            type: 'bar',
            barColor: '#0daed3',
            barWidth: 6,
            height: 30,
        });
        $('#site-visits').sparkline('html', {
            type: 'bar',
            barColor: '#f63131',
            barWidth: 6,
            height: 30,
        });
    });

    //wysihtml5
    $('#wysiwyg').wysihtml5();

    //graph input
    $(document).ready(function() {
        pie_chart();
        sparkline_graphs();
    });

    function pie_chart() {
        $(function() {
            //create instance
            $('.chart1').easyPieChart({
                animate: 2000,
                barColor: '#74b749',
                trackColor: '#dddddd',
                scaleColor: '#74b749',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(50);
            }, 5000);
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(70);
            }, 10000);
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(30);
            }, 15000);
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(90);
            }, 19000);
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(40);
            }, 32000);
        });

        $(function() {
            //create instance
            $('.chart2').easyPieChart({
                animate: 2000,
                barColor: '#ed6d49',
                trackColor: '#dddddd',
                scaleColor: '#ed6d49',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(90);
            }, 10000);
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(40);
            }, 18000);
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(70);
            }, 28000);
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(50);
            }, 32000);
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(80);
            }, 40000);
        });

        $(function() {
            //create instance
            $('.chart3').easyPieChart({
                animate: 2000,
                barColor: '#0daed3',
                trackColor: '#dddddd',
                scaleColor: '#0daed3',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(20);
            }, 9000);
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(59);
            }, 20000);
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(38);
            }, 35000);
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(79);
            }, 49000);
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(96);
            }, 52000);
        });

        $(function() {
            //create instance
            $('.chart4').easyPieChart({
                animate: 2000,
                barColor: '#ffb400',
                trackColor: '#dddddd',
                scaleColor: '#ffb400',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(40);
            }, 6000);
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(67);
            }, 14000);
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(43);
            }, 23000);
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(80);
            }, 36000);
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(66);
            }, 41000);
        });


        $(function() {
            //create instance
            $('.chart5').easyPieChart({
                animate: 3000,
                barColor: '#F63131',
                trackColor: '#dddddd',
                scaleColor: '#F63131',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(30);
            }, 9000);
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(87);
            }, 19000);
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(28);
            }, 27000);
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(69);
            }, 39000);
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(99);
            }, 47000);
        });


    }


    function sparkline_graphs() {
        $(function() {
            $('#stock-graph').sparkline('html', {
                type: 'bar',
                barColor: '#0daed3',
                barWidth: 7,
                height: 38,
            });
        });
    }


    google.load("visualization", "1", {
        packages: ["corechart"]
    });

    $(document).ready(function() {
        drawChart2();
        drawChart3();
        drawChart4();
    })



    function drawChart2() {
        var data = google.visualization.arrayToDataTable([
            ['Week', 'Visitors', 'Orders'],
            ['Sun', 9709, 761],
            ['Mon', 1367, 8631],
            ['Tue', 6792, 971],
            ['Wed', 1267, 7491],
            ['Thu', 9539, 1792],
            ['Fri', 670, 9367],
            ['Sat', 9761, 709]
        ]);

        var options = {
            width: 'auto',
            height: '160',
            backgroundColor: 'transparent',
            colors: ['#ed6d49', '#0daed3'],
            tooltip: {
                textStyle: {
                    color: '#666666',
                    fontSize: 11
                },
                showColorCode: true
            },
            legend: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            chartArea: {
                left: 100,
                top: 10
            },
            focusTarget: 'category',
            hAxis: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            vAxis: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            pointSize: 6,
            chartArea: {
                left: 60,
                top: 10,
                height: '80%'
            },
            lineWidth: 1,
        };

        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
        chart.draw(data, options);
    }


    function drawChart3() {
        var data = google.visualization.arrayToDataTable([
            ['Dự Án', 'Nhập', 'Xuất', 'Lợi nhuận'],
            ['Vista Verde', 9800, 9900, 11500],
            ['The Prince', 8170, 8860, 13208],
            ['Mia Resort', 12870, 12340, 26230],
            ['SaigonBank', 8030, 8200, 15069],
            ['Nissin Foods', 12700, 12770, 33889],
            ['SunSteel', 8170, 6160, 16069], ]);

        var options = {
            width: 'auto',
            height: '160',
            backgroundColor: 'transparent',
            colors: ['#ed6d49', '#0daed3', '#ffb400', '#74b749', '#f63131'],
            tooltip: {
                textStyle: {
                    color: '#666666',
                    fontSize: 11
                },
                showColorCode: true
            },
            legend: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            chartArea: {
                left: 60,
                top: 10,
                height: '80%'
            },
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));
        chart.draw(data, options);
    }

    function drawChart4() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Eat', 2],
            ['Work', 10],
            ['Commute', 2],
            ['Read', 2],
            ['Sleep', 8]
        ]);

        var options = {
            width: 'auto',
            height: '160',
            backgroundColor: 'transparent',
            colors: ['#ed6d49', '#74b749', '#0daed3', '#ffb400', '#f63131'],
            tooltip: {
                textStyle: {
                    color: '#666666',
                    fontSize: 11
                },
                showColorCode: true
            },
            legend: {
                position: 'left',
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            chartArea: {
                left: 0,
                top: 10,
                width: "100%",
                height: "100%"
            }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
        chart.draw(data, options);
    }
</script>